<template>
	<view>
		<view class="cu-bar search bg-white searchs">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" @input="getlist" placeholder="请输入ID号/手机号" confirm-type="search" v-model="friend"></input>
			</view>
		</view>
		<view class="item-title">联系人</view>
		<view>
		      <view class="item-war" v-for="(item, index) in list" :key="index">
		          <view class="item-top" @click="topuser(item.id)">
		            <image class='top-img' v-bind:src="item.avatar?item.avatar:avatar">
					<view class='item-tops' >{{item.nickname}}</view>	
		          </view>
		      </view>
		      <!-- <view class="item-war">
		          <view class="item-top">
		            <image class='top-img' src="../../../static/img/toxiang_62.png">
					<view class='item-tops' >呀哈哈</view>	
		          </view>
		      </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list : [],
				friend:'',
				avatar:'../'+uni.getStorageSync('noavatar')
			}
		},
		onLoad(){
		},
		onShow(){
			this.$msgchat.initwork();
		},
		methods: {
			//获取搜索信息
			getlist(e){
				var obj = {
					token: uni.getStorageSync('token'),
					search: e.detail.value
				}
				this.$common.requests('/api/friend/searchFriend', obj).then(res => {
					for(var i=0;i < res.data.data.length;i++ ){
						// this.avatar = res.data.data[i].userinfo.avatar;
						if(res.data.data[i].avatar){
							res.data.data[i].avatar =  this.$common.baseUrl + res.data.data[i].avatar;
						}else{
							res.data.data[i].avatar = '';
						}
					}
					this.list = res.data.data;
					
				})
			},
			//跳转好友详情
			topuser(id){
				uni.navigateTo({
					url: '/pages/detailsData/detailsData?friend_id='+id
				})
			},
			fanhui(){
				this.$common.requests('/api/index/clearnewcount').then(res => {
				})
				uni.switchTab({
					url: '../index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	 page{
		 height: 100%;
		 background: $uni-color-bei;
	 }
	 .cu-btn{
		 margin-right: 3%;
		 background: #F4F6FF;
		 color: $uni-bt-color;
		 width: 132upx;
	 }
	.searchs{
		padding: 70upx 0 10upx 0;
		background: $uni-color-bei;
	}
	.round{
		border-radius: 14upx;
		background: #fff;
	}
	.item-title {
            color: #898989;
            padding: 0.4rem 0 0.6rem 0.8rem;
        }
        .item-war{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem 0 0.5rem 1rem;
          /*margin-top: 0.7rem;*/
          background: #fff;
          border-bottom: 1px solid #ebeced;
        }
        .item-top{
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .item-tops{
          color: #333;
          font-weight: bold;
          font-size: 18px;
		  margin-left: 60upx;
        }
        .top-img{
          width: 3rem;
		  height: 3rem;
          border-radius: 50%;
        }
        .bot-text{
          color: #898989;
          font-size: 16px;
        }




</style>
